<template>

  <div class="chartName">
    <div>{{ title }}</div>
    <div class="title">
        <vxe-button  style="background-color:#945635;color:#f0f8ff;width:47px;height:27px;font-size: 11px;">小时</vxe-button>
        <vxe-button  style="background-color:#f0f0f0;width:47px;height:27px;font-size: 11px;">日期</vxe-button>
        <vxe-button  style="background-color:#f0f0f0;width:47px;height:27px;font-size: 11px;">月份</vxe-button>
    </div>
  </div>
  <div class="main" ref="chart1" style="width: 100%; height: 100%"></div>
</template>
   
   
  <script setup>
// 先引入echarts
import * as echarts from "echarts";
// vue3 引入对应功能
import { onMounted, ref } from "vue";

defineProps({
  title: {
    type: String,
  },
});
// 声明chart1，使用ref赋值null
const chart1 = ref(null);

// 声明echarts函数
const chart = () => {
  // 解决echarts在vue中切换到其他页面再返回来就不显示的问题
  chart1.value.setAttribute("_echarts_instance_", "");
  // 这里使用chart1.value的形式获取到dom节点
  let myChart = echarts.init(chart1.value);

  // 绘制图表
  myChart.setOption({
    tooltip: {
      trigger: "axis",
      axisPointer: { type: "cross" },
    },
    legend: {},
    xAxis: [
      {
        type: "category",
        axisTick: {
          alignWithLabel: true,
        },
        data: ["2023-12-12 00:00:00"],
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "处方总数",
        min: 0,
        max: 1,
        position: "left",
        axisLabel: {
          formatter: "{value} ",
        },
      },
    ],
    series: [
      {
        name: "处方总数",
        type: "line",
        smooth: true,
        yAxisIndex: 0,
        data: [1],
      },
    ],
  });
  // echarts 自适应，如果dom元素是自适应高宽，会随之改变echarts大小
  window.addEventListener("resize", () => {
    myChart.resize();
  });
};
// 数据渲染完成后在这里挂载
onMounted(() => {
  chart();
});


</script>
   
  <style scoped>
  .chartName {
    font-size: 18px;
    color: #1b1b1b;
    display: flex;
    margin-top: 20px;
    margin-left: 30px;
    margin-right: 10px;
    padding-bottom: 10px;
    justify-content: space-between;
  }
  .main {
    margin: auto;
    padding:20px;
 
  }
  .title{
    float: right;
  }
</style>